<template>
    <div class="video-list">
        <a-tabs class="top-tab" v-model:activeKey="deptActiveKey" @change="handleTab">
            <a-tab-pane v-for="item in deptList" :key="item.value" :tab="item.label"
                :disabled="userStore.getLoginInfo?.userInfo?.orgCode != item.value">
            </a-tab-pane>
        </a-tabs>
        <div class="video-flex">

            <VideoContent class="video-flex-item" v-for="item, index in videoList" :rootId="item.rootId + index"  :videoId="item.videoId + index"
                :canvasId="item.canvasId + index" :name="item.name" :OpeningChannel="item.OpeningChannel"
                :caramObj="item.caramObj" :deviceObj="item.deviceObj" :history="false" :hasTitle="item.hasTitle"
                :hasAction="item.hasAction"></VideoContent>
                <a-result v-if="videoList.length == 0" style="flex:1">
                <template #icon>
                    <img :src="notDataSvg" width="150px" height="150px">
                </template>
            </a-result>
        </div>
        <div style="text-align: right;margin-top: 20px;">
            <a-pagination v-model:current="current" :total="total" :pageSize="pageSize" @change="handlerPageChange" />
        </div>

    </div>
</template>
<script setup>

import { onMounted, onUnmounted, ref, unref } from 'vue'
import VideoContent from './components/VideoContent.vue'
import { listAll, list, diviceList } from './videolist.api';
import { useUserStore } from '/@/store/modules/user';
import { Pagination } from 'ant-design-vue';
import notDataSvg from '/@/assets/svg/no-data.svg';
import NvrRpc from './rpc.js'
const APagination = Pagination;
const userStore = useUserStore();
let isLogin = ref(false);//nvr是否登录
let deptActiveKey = ref('');
let deptList = ref([])//部门
let current = ref(1);
let total = ref(0);
let pageSize = ref(9);
let deviceObj = {
    ip: '',
    username: '',
    password: '',
    port: ''
}//设备nvr的信息
const videoList = ref([])
const seatList = ref([])
const getDeptList = async () => {
    let result = await listAll();
    result = result.filter(item => {
        return item.izLeaf != 0
    })
    let data = result.map(item => {
        if (item.izLeaf != 0) {
            return {
                label: item.departName,
                value: item.orgCode
            }
        }
    })
    if (data.length > 0) {
        let obj = data.find(item => {
            return item.value == userStore.getLoginInfo?.userInfo?.orgCode
        })
        console.log("登录回来的数据", obj)
        if (obj) {
            deptActiveKey.value = obj.value;
        } else {
            deptActiveKey.value = data[0].value;
        }
    }
    deptList.value = data;
}
const querySeatList = async () => {
    console.log("斤斤计较");
    videoList.value = [];
    seatList.value = [];
    let result = await list({
        pageNo: current.value,
        pageSize: pageSize.value,
        orgCode: deptActiveKey.value,
        disable: '0'
    });
    if (result.records && result.records.length > 0) {
        result.records.filter(item => {
            return !item.equipment;
        })
        let data = result.records.map(item => {
            return {
                name: item.name,
                rootId:'rootnowId',
                videoId: 'videonowId',
                canvasId: 'canvasnowId',
                caramObj: {
                    ip: item.equipment.ip,
                    port: item.equipment.port,
                    username: item.equipment.username,
                    password: item.equipment.password,
                },
                deviceObj: deviceObj,
                hasAction: false,
                hasTitle: true
            }
        })


        seatList.value = data;
        total.value = result.total;
        getCameraAll();
    }
}
const getDiviceList = async () => {

    let result = await diviceList({
        category: 'dvr'
    });
    if (result.records && result.records.length > 0) {
        deviceObj = {
            ip: result.records[0].ip,
            port: result.records[0].port,
            username: result.records[0].username,
            password: result.records[0].password
        }

    }
}
const handleTab = async () => {
    if (isLogin.value) {
        await querySeatList()
    }
}
const handlerPageChange = async (page, pageSize) => {
    current.value = page;
    querySeatList();
}
/**
 * 获取所有的通道，码流
 */
const getCameraAll = () => {
    console.log("jin");

    NvrRpc.getCameraAll().then(res => {
        if (res && res.length > 0) {
            for (const item of res) {
                for (const element of seatList.value) {
                    if (item.DeviceInfo && item.DeviceInfo.Address == element.caramObj.ip && item.Enable) {
                        element.OpeningChannel = (item.UniqueChannel + 1) + ""
                    }
                }

            }
            console.log("席位：：", seatList.value)
            videoList.value = seatList.value;
        }
    }).catch(res => {
        console.log("通道===", res);

    })

}
onMounted(async () => {
    await getDeptList();
    await getDiviceList()
    try {
        let result = await NvrRpc.logIn({
            ip: deviceObj.ip,
            port: deviceObj.port,
            username: deviceObj.username,
            password: deviceObj.password
        })
        isLogin.value = result?.result;
        await querySeatList()

    } catch (error) {
        isLogin.value = false;
    }
})
onUnmounted(() => {
    try {
        NvrRpc.logOut();
    } catch (error) {

    }

})
</script>
<style lang="less" scoped>
.video-list {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #fff;

    .video-flex {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        gap: 20px;

        justify-content: flex-start;
        flex-wrap: wrap;

        &-item {
            position: relative;

            width: 32%;
            height: 300px;
        }
    }
}
</style>